margin
|
|
|
|
|
|
|||||||||
|
7.0 |
8.0 |
9.0 |
7.0 |
8.0 |
9.6 |
10.0 |
10.0 |
3.1 |
4.0 |
5.0 |
3.0 |
3.6 |
4.0 |
|
Помилка |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Коротка інформація
|
CSS |
CSS1 |
|
Значення
за умовчанням |
0 |
|
Наслідує |
Ні |
|
Застосовується |
До усіх
елементів |
|
Аналог
HTML |
Ні |
|
Посилання
на специфікацію |
http://www.w
3.org/TR/CSS21/box.html#propdef - margin |
Опис
Встановлює
величину відступу від кожного краю елементу. Відступом є простір від межі
поточного елементу до внутрішньої межі його батьківського елементу (мал. 1).
Мал. 1.
Відступ від лівого краю елементу
Якщо у
елементу немає батька, відступом буде відстань від краю елементу до краю вікна
браузеру з урахуванням того, що біля самого вікна за умовчанням теж встановлені
відступи. Щоб від них позбавитися, слід встановлювати значення margin для
селектора <BODY> рівне нулю.
Властивість
margin дозволяє задати величину відступу відразу для усіх сторін елементу або
визначити її тільки для вказаних сторін.
Синтаксис
margin:
[значення | відсотки | auto] {1,4} | inherit
Значення
Дозволяється
використовувати одно, два, три або чотири значення, розділяючи їх між собою
пропуском. Ефект залежить від кількості значень і приведений в таблицю. 1.
|
Таблиця. 1. Залежність від числа значень |
|
|
Число значень |
Результат |
|
1 |
Відступи
будуть встановлені одночасно від кожного краю елементу. |
|
2 |
Перше
значення встановлює відступ від верхнього і нижнього краю, друге - від лівого
і правого. |
|
3 |
Перше
значення задає відступ від верхнього краю, друге - одночасно від лівого і
правого краю, а третє - від нижнього краю. |
|
4 |
По черзі встановлюється
відступ від верхнього, правого, нижнього і лівого краю. |
Величину
відступів можна вказувати в пікселах (px), відсотках (%) або інших допустимих
для CSS одиницях. Значення може бути як позитивним, так і негативним числом.
auto
Вказує, що розмір відступів буде
автоматично розрахований браузером.
inherit
Наслідує значення батька.
Приклад
HTML 4.01CSS
2.1IE 6IE 7IE 8Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows - 1251">
<title>margin</title>
<style type="text/css">
BODY {
margin: 0; /* Прибираємо відступи */
}
DIV.parent {
margin: 20%; /* Відступів навколо елементу
*/
background: #fd0; /* Колір фону */
padding: 10px; /* Полів навколо тексту */
}
DIV.child {
border: 3px solid #666; /* Параметрів рамки
*/
padding: 10px; /* Полів навколо тексту */
margin: 10px; /* Відступів навколо */
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution
ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>
Результат
цього прикладу показаний на мал. 2.
Мал. 2.
Застосування властивості margin
Об'єктна модель
[window.]document.getElementById("elementID").style.margin
Браузери
Internet
Explorer 6 в режимі несумісності (quirk mode) не підтримує вирівнювання блоку
по центру за допомогою правила margin : 0 auto. Також в цьому браузері
спостерігається помилка з подвоєнням значення лівого або правого відступу для
плаваючих елементів, вкладених у батьківські елементи. Подвоюється той відступ,
який прилягає до сторони батька. Проблема зазвичай вирішується додаванням
display : inline для плаваючого елементу.
Internet
Explorer до сьомої версії включно не підтримує значення inherit.
